<template>
  <div>
    <!-- 头部返回按钮 -->
    <div class="header">
      <div class="text" @click="okk">
      <i class="iconfont icon-back"></i>
      <span class="text1">
        <i class="iconfont icon-fanhui"></i>
          医护上门
          </span>
     </div>
   </div>

   <!-- body -->
   <div class="img">
      <img class="img" alt="announce_one" src="@/assets/images/nurse001.jpg">
   </div>

  <!-- 图标 -->
    <div class="icon-mydingdan">
      <div class="payment" @click="toApplyPosition">
          <i class="iconfont icon-shimingrenzheng"></i>
          <div>实名认证</div>
      </div>

      <div class="fahuo">
          <i class="iconfont icon-airudiantubiaohuizhi-zhuanqu_xinlizixun"></i>
          <div>健康证明</div>
      </div>

        <div class="hold">
          <i class="iconfont icon-boshimao1"></i>
          <div>专业培训</div>
      </div>

       <div class="evaluate">
          <i class="iconfont icon-jiankong"></i>
          <div>全程监控</div>
      </div>

      <div class="evaluate">
          <i class="iconfont icon-daipingjia01"></i>
          <div>售后保障</div>
      </div>
     </div>

      <!-- 过渡条 -->
    <div class="transit"></div>

    <!-- 护工上门 -->
        <!-- 个人介绍 -->
  <!-- body person-->
   <div class="nurse-info" @click="toNurseDetail(item)" v-for="item in list" :key="item.id">
     <!-- 左边的图标和文字 -->
     <div class="left-tip">
        <div class="person">
            <div class="icon">
              <img :src="item.top_img" class="avatar">
            </div>
            <!-- <div class="name">{{nackname}}</div> liwhus-->
        </div>
        <div>
          <div class="nurse-name">{{item.realname}}</div>
          <div class="nurse-bg">{{item.college}}</div>
        </div>
    </div>
    <!-- 右边 详细介绍 -->
     <div class="edit-person-info">查看预约情况</div>
   </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getHhgong()
  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    toNurseDetail (item) {
      console.log(item.id)
      console.log('护工详细介绍页面')
      localStorage.setItem('hugong_id', item.id)
      this.$router.push({
        name: 'nurseDetails'
      })
    },
    toApplyPosition () {
      this.$router.push({
        name: 'applyPosition'
      })
    },
    getHhgong () {
      this.$http.get('/getHugong').then(res => {
        console.log(res.data)
        this.list = res.data.data
      })
    }

  }
}
</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background:rgb(255, 204, 153);
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
.img{
  /* margin-top:5px; */
  /* height: 160px; */
  width:100%;
  text-align: center;
  margin-bottom:10px;
}

/*  我的订单里面  */
.dingdan{
  margin:3%;
  font-size: 0.45rem;
  font-weight: bold;
}
.icon-mydingdan{
  text-align: center;
  margin-top:2%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 3%;

}
.icon-mydingdan .payment .iconfont{
  font-size: 0.9rem;
  color:rgb(255, 204, 153)
}
.icon-mydingdan .fahuo .iconfont{
  font-size: 0.9rem;
  color:rgb(255, 204, 153)
}
.icon-mydingdan .hold .iconfont{
  font-size: 0.9rem;
  color:rgb(255, 204, 153)
}
.icon-mydingdan .evaluate .iconfont{
  font-size: 0.9rem;
  color:rgb(255, 204, 153)
}
.transit{
  height: 8px;
  width: 100%;
  background:rgb(242, 242, 242);
}
/* 护工的一个简短介绍 */
.nurse-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid #ccc
}
.nurse-info .edit-person-info{
  margin-right: 10%;
  font-size: 0.45rem;
}
.avatar {
    width:2rem;
    height: 2rem;
    border-radius: 50px;
    background: blanchedalmond;
    margin-right: 3%;
}
.left-tip .nurse-name{
  font-size: 0.4rem;
  margin-left:20px;
}
.left-tip .nurse-bg{
  font-size: 0.35rem;
  color: rgb(129, 121, 121);
  margin-left: 10px;
  margin-top:4px
}
.nurse-info .left-tip{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:3% 5% 3% 3%;
}

</style>
